<template>
   <div>
       <!-- 轮播图 -->
       <!-- 变量 前面要加上冒号 -->
       <my-swipe :url="lunUrl"></my-swipe>
       <ul class="mui-table-view mui-grid-view mui-grid-9">
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <router-link :to="{name: 'news.list'}">
                    <span class="mui-icon mui-icon-home"></span>
                    <div class="mui-media-body">新闻资讯</div>
                </router-link></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <router-link :to="{ name: 'photo.share'}">
                    <span class="mui-icon mui-icon-email"></span>
                    <div class="mui-media-body">图文分享</div>
                </router-link></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <router-link :to="{name:'goods.list'}">
                    <span class="mui-icon mui-icon-chatbubble"></span>
                    <div class="mui-media-body">商品展示</div>
                </router-link></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                    <span class="mui-icon mui-icon-location"></span>
                    <div class="mui-media-body">留言反馈</div></a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                    <span class="mui-icon mui-icon-search"></span>
                    <div class="mui-media-body">搜索资讯</div></a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                    <span class="mui-icon mui-icon-phone"></span>
                    <div class="mui-media-body">联系我们</div></a></li>
        </ul> 

   </div>
</template>

<script>
   export default {
       data () {
       return {
           imgs: [],
           lunUrl: 'apiImg' 
       }
   },
   created(){
       this.$ajax.get(this.lunUrl)
       .then(res=>{
           console.log(res.data.Img.img_url);
           this.imgs = res.data.Img.img_url;
       })
   }
 }
</script>

<style scoped>
    /* 九宫格 */
    .mui-table-view.mui-grid-view.mui-grid-9{
        background-color: white;
        border: 0;
        margin-top: 0px;
    }
    .mui-table-view.mui-grid-view.mui-grid-9 li{
        border: 0;
    }
    .mui-icon-home:before,.mui-icon-email:before,.mui-icon-chatbubble:before,
    .mui-icon-location:before,.mui-icon-search:before,.mui-icon-phone:before{
        content: ''
    }
    .mui-icon-home,.mui-icon-email,.mui-icon-chatbubble{
        background-image: url('../../static/img/icon1.png');
        background-repeat: round;
    }
    .mui-icon-location,.mui-icon-search,.mui-icon-phone{
        background-image: url('../../static/img/icon2.png');
        background-repeat: round;
    }
    .mui-icon{
        height: 50px;
        width: 50px;
    }
</style>
